<template>
    {{ formater }}
  </template>
  
  <script setup>
  import { ref, onMounted, defineProps, defineEmits, watch } from "vue";
  const props = defineProps({
    second: {
      type: Number,
      default: 0,
    },
    format: {
      type: String,
      default: "MM-dd hh:mm",
    },
    sformat: {
      type: String,
      default: "hh:mm:ss",
    },
    suffix: {
      type: String,
      default: "",
    },
  });
  const emit = defineEmits(["counterOver"]);
  // 倒计时显示
  const formater = ref("");
  
  onMounted(() => {
    formater.value = TIME_FORMAT(props.second);
  });
  // 倒计时逻辑处理
  const TIME_FORMAT = (ts) => {
    let res;
  
    const showtime = () => {
      if (ts <= 0) {
        clearInterval(run);
        emit("counterOver");
        return TIME_SFORMAT(0, props.sformat, props.suffix);
      }
      res = TIME_SFORMAT(ts, props.sformat, props.suffix);
      return res;
    };
    const run = setInterval(() => {
      ts -= 1000;
      res = showtime();
      formater.value = res;
    }, 1000);
    return showtime();
  };
  const TIME_FORMIN = (param) => {
    if (param < 0) {
      param = 0;
    }
    if (param < 10) {
      param = "0" + param;
    }
    return param;
  };
  
  const TIME_SFORMAT = (ts, sfmt, suffix) => {
    const time = {
      "h+": TIME_FORMIN(Math.floor((ts / 1000 / 60 / 60) % 24)),
      "m+": TIME_FORMIN(Math.floor((ts / 1000 / 60) % 60)),
      "s+": TIME_FORMIN(Math.floor((ts / 1000) % 60)),
    };
    for (let k in time) {
      if (new RegExp("(" + k + ")").test(sfmt)) {
        sfmt = sfmt.replace(
          RegExp.$1,
          RegExp.$1.length == 1
            ? time[k]
            : ("00" + time[k]).substr(("" + time[k]).length)
        );
      }
    }
    return sfmt + suffix;
  };
  </script>
  
  <style></style>
  